<template>
  <div style="height:100%; ">
    <img
      class="biao"
      @click="details(item)"
      style="object-fit: contain; cursor: pointer; background-color: #00000033"
      :src="
        item.vehicleCoverPicture
          ? item.vehicleCoverPicture
          : $img + item.houseImageDiv
      "
    />
    <div class="name" :style="mwidth ? 'width:' + mwidth + 'px' : 'width:auto'">
      <div
        class="t_1"
        style="cursor: pointer; color: #333"
        @click="details(item)"
      >
        <tag-view :item="item"></tag-view>
        {{
          item.vehicleBrandModel
            ? (item.vehicleBrandModel.split("|")[0] || "") +
              " " +
              (item.vehicleBrandModel.split("|")[1] || "")
            : ""
        }}
        {{ item.model ? item.model + "/" : "" }}
        {{
          item.bodyStructureDoors +
            "门" +
            item.bodyStructureSeat +
            "座" +
            item.bodyStructureVehicle +
            "车"
        }}
      </div>
      <div class="t_2" style="cursor: pointer" @click="details(item)">
        <span style="margin-right: 5px"
          >{{
            item.mileage
              ? +item.mileage >= 10000
                ? +(item.mileage / 10000).toFixed(1) + "万公里/"
                : item.mileage + "公里/"
              : ""
          }}{{
            item.licensingTimeYear ? item.licensingTimeYear + "年" : ""
          }}</span
        >
      </div>
      <div class="t_4">
        <img
          style="cursor: pointer"
          @click="toAgent(item)"
          :src="
            item.userImage
              ? item.userImage
              : item.userInformation
              ? item.userInformation.image ||
                'https://pic.bangbangtongcheng.com/static/my/header.png'
              : 'https://pic.bangbangtongcheng.com/static/my/header.png'
          "
        />
        <span @click="toAgent(item)" style="cursor: pointer">{{
          item.nikeName
            ? item.nikeName
            : item.userInformation
            ? item.userInformation.nikeName || "未命名用户"
            : "未命名用户"
        }}</span>
        <div @click="shopdetails(item)" style="cursor: pointer">
          {{
            item.shopName
              ? item.shopName
              : item.distributor
              ? item.distributor.storeName
              : "个人车源"
          }}
        </div>
      </div>
    </div>
    <div class="qian">
      <p class="p1">
        {{
          item.intervalPrice && item.intervalPrice != ""
            ? item.intervalPrice.indexOf("-") > -1
              ? item.intervalPrice.split("-")[0] +
                "万-" +
                item.intervalPrice.split("-")[1] +
                "万"
              : ""
            : item.price
            ? item.price + "万"
            : ""
        }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    mwidth: {
      type: String | Number,
      default: ""
    }
  },
  data() {
    return {
      loginstate: false
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
    },
    toAgent(item) {
      this.$emit("toAgent", item);
    },
    shopdetails(item) {
      this.$emit("shopdetails", item);
    },
    details(item) {
      this.$emit("details", item);
    },
    jiaru(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.jiaruduibi(id);
    },
    jiaruduibi(id) {
      let contrastIdList = JSON.parse(localStorage.getItem("contrastIdList"));
      if (contrastIdList && contrastIdList.length >= 4) {
        this.$message({
          message: "最多8套进行对比",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      if (contrastIdList == null) {
        let list = [id];
        localStorage.setItem("contrastIdList", JSON.stringify(list));
      } else {
        contrastIdList.push(id);
        localStorage.setItem("contrastIdList", JSON.stringify(contrastIdList));
      }
      // this.housesList.forEach((e) =>{
      // 	if(e.id == id){
      // 		e.houseContrast = true
      // 	}
      // })
      item.houseContrast = true;
      // this.$emit("isDB", {
      //   id:true
      // });
      this.$message({
        message: "已加入对比！",
        type: "success",
        offset: 120,
        duration: 2000
      });
    },
    quxiaoduibi(id) {
      let contrastIdList = JSON.parse(localStorage.getItem("contrastIdList"));
      for (var i = 0; i < contrastIdList.length; i++) {
        if (contrastIdList[i] == id) {
          contrastIdList.splice(i, 1);
        }
      }
      localStorage.setItem("contrastIdList", JSON.stringify(contrastIdList));
      // this.housesList.forEach((e) =>{
      // 	if(e.id == id){
      // 		e.houseContrast = false
      // 	}
      // })
      item.houseContrast = false;
      this.$message({
        message: "已取消对比！",
        type: "error",
        offset: 120,
        duration: 2000
      });
    }
  }
};
</script>

<style lang="less" scoped>
.biao {
  width: 300px;
  // height: 200px;
  height: 100%;
  border-radius: 10px;
}
.fwxm {
  display: inline-block;
  vertical-align: top;
  margin-left: 24px;
  position: relative;
  height: 100%;
  width: 700px;
  .t_1 {
    font-size: 24px;
    cursor: pointer;
    font-weight: 600;
    color: #64b6a8;
  }
  .t_2 {
    font-size: 16px;
    color: #666666;
    margin-top: 12px;
  }
}
.name {
  display: inline-block;
  vertical-align: top;
  margin-left: 24px;
  position: relative;
  height: 200px;
  height: 100%;
  width: 420px;
  max-width: 700px;
  .t_1 {
    font-size: 24px;
    cursor: pointer;
    font-weight: 600;
  }
  .t_2 {
    font-size: 16px;
    color: #666666;
    margin-top: 12px;
  }
  .t_3 {
    font-size: 16px;
    color: #666666;
    margin-top: 12px;
  }
  .t_4 {
    position: absolute;
    font-size: 16px;
    color: #666666;
    bottom: 0;
    left: 0;
    white-space: nowrap;
    img {
      vertical-align: top;
      width: 31px;
      height: 31px;
      border-radius: 31px;
    }
    div {
      display: inline-block;
      //width: 90px;
      padding: 0px 5px;
      height: 30px;
      background: #ffffff;
      border: 1px solid #64b6a8;
      border-radius: 4px;
      text-align: center;
      line-height: 30px;
      margin-left: 24px;
      color: #64b6a8;
    }
  }
}
.qian {
  position: absolute;
  top: 62px;
  right: 32px;
  .p1 {
    //width: 120px;
    //font-size: 32px;
    font-size: 30px;
    color: #e00000;
    text-align: center;
  }
  .p2 {
    //width: 120px;
    //font-size: 18px;
    font-size: 16px;
    color: #333333;
    text-align: center;
  }
}
.duibi {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.64);
  cursor: pointer;

  p {
    position: absolute;
    width: 130px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 24px;
    color: #fff;
    border: 2px solid #ffffff;
    font-size: 21px;
  }
}
</style>
